<template>
  <div>
    <note-section :notes="notes" :kind="NoteKind.Intro" @add-note="addNote"></note-section>
    <note-section :notes="notes" :kind="NoteKind.Note" @add-note="addNote"></note-section>
    <note-section :notes="notes" :kind="NoteKind.Lecture" @add-note="addNote"></note-section>
    <div v-if="context.mat.kind == MatKind.Poem" class="note-section">
      <div class="note-section-title">
        参考
      </div>
      <div class="note-list">
        <mat-ref :title="context.content"></mat-ref>
      </div>
    </div>

    <div
      id="mat-note-editor"
      class="note-editor-pane"
      v-show="isShowEditor"
    >
      <note-editor
        :context="context"
        :value="note"
        @close="isShowEditor = false"
      ></note-editor>
    </div>
  </div>
</template>

<script>
import { NoteKind, NoteScope, MatKind } from "@js/constants.js";
import NoteEditor from "./editors/NoteEditor.vue";
import MatRef from "./MatRef.vue";
import NoteSection from "./NoteSection.vue";
export default {
  props: ["context"],
  components: {
    NoteEditor,
    MatRef,
    NoteSection
  },
  data() {
    return {
      NoteKind: NoteKind,
      MatKind: MatKind,
      note: {
        content: "",
      },
      notes: [],
      isShowEditor: false,
    };
  },
  created() {
  },
  watch: {
    'context.mat': {
      handler() {
        this.loadNotes();
      }
    }
  },
  methods: {
    filteredNotes(kind) {
      return this.notes.filter((n) => n.kind == kind);
    },
    loadNotes() {
      if (!this.context.mat|| !this.context.mat.id) return;
      this.authGet(
        "/api/v1/notes/list/cards?mid=" +
          this.context.mat.id +
          "&scope=" +
          NoteScope.Article
      )
        .then((res) => {
          this.notes = res.data;
        })
        .catch((e) => console.log(e));
    },
    addNote(kind) {
      this.$emit("update-context", { kind: kind });
      this.showEditor(kind);
    },
    showEditor(kind) {
      // TODO: 需要根据情况清空编辑器的内容
      let editor = document.getElementById("mat-note-editor");
      let classname = "note-kind-" + kind;
      for (let notelist of this.$el.getElementsByClassName(classname)) {
        notelist.appendChild(editor);
      }
      this.isShowEditor = true;
    },
  },
};
</script>

<style lang="stylus">
// 这个模块的样式都放在Notes.vue中
</style>